<template>
	<div class="news_list_view" @click="goDetails()">
		<a-layout style="height: 200px">
			<a-layout-sider width="400">
				<a-image
					:preview="false"
					height="200"
					show-loader
					:src="news.articleCover"
				/>
			</a-layout-sider>
			<a-layout-content>
				<div class="news_details">
					<h3>{{ news.articleTitle }}</h3>
					<div class="news_details_bottom">
						<div>
							<icon-dashboard />发布时间:{{ news.articleTime }}
						</div>
						<div>
							<icon-thumb-up-fill />{{ news.articlesupports }}
						</div>
						<div>
							<icon-pen-fill />作者:{{ news.articleAuthor }}
						</div>
					</div>
				</div>
			</a-layout-content>
		</a-layout>
	</div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import movieApi from '../api/movie'
const props = defineProps({
		news: Object
	}),
	router = useRouter(),
	news = toRef(props, 'news')
news.value.articleTime = movieApi.transformDate(news.value.articleTime)

function goDetails() {
	router.push(`/newsDetails/${news.value._id}`)
}
</script>

<style lang="scss" scoped>
.news_list_view {
	background-color: var(--main-2-bg);
	padding: var(--normal-distance);
	border-radius: 10px;
	cursor: pointer;
}
.news_list_view:hover {
	box-shadow: 0 0 6px var(--sd-bg);
}
.news_details {
	position: relative;
	height: 100%;
	margin-left: 2rem;
	overflow: hidden;
	color: var(--fc-bg);
	.news_details_bottom {
		position: absolute;
		display: flex;
		bottom: var(--normal-distance);
		right: 0;
		& > * + * {
			margin-left: var(--normal-distance);
		}
	}
}
</style>
